import { useState, useEffect } from 'react'
import { View, Text, Image, RichText } from '@tarojs/components'
import LgCountDown from '../../../components/countdown'
import Util from '../../../../utils/index'

import Taro from '@tarojs/taro'
import './index.scss'
import newsCoverPng from '../../images/newstitle.png'

const {
    getCutdown,
    RemoveHTML
} = Util

function CardA(props) {

    let {
        title,
        content,
        startTime,
        endTime,
        toDetail,
        status,
        publisher,
        userType
    } = props

    const [showCutdown, setShowCutdown] = useState(true)

    // 倒计时结束
    const handleEnd = () => {
        setShowCutdown(false)
    }
    return (
        <View className='card_container_A' onClick={toDetail}>
            <View className={
                title.indexOf('一网通办') > -1 ?
                    'todo_icon todo-type1' :
                    title.indexOf('信息采集') > -1 ?
                        'todo_icon  todo-type4' :
                        title.indexOf('投票') > -1 ?
                            'todo_icon todo-type2' :
                            title.indexOf('会议邀请') > -1 ?
                                'todo_icon todo-type1' :
                                title.indexOf('预习') > -1 ?
                                    'todo_icon brforeclass' :
                                    'todo_icon todo-type0'
            }></View>
            <View className='todo_body'>
                <View className="title_box">
                    <View className='title' style={{ color: `${status != 0 ? '#6666' : ''}` }}>{title}</View>
                    <View className="dead_time" style={{ display: Util.getTimeDiff(endTime, "") == 0 ? 'none' : '' }}>{Util.getTimeDiff(endTime, "") + '截止'}</View>
                </View>
                <View className='content' style={{ color: `${status != 0 ? '#6666' : ''}` }}>{content.replace(/>>/, '')}<Text style={{ fontFamily: '宋体' }}>{'>>'}</Text></View>
                <View className='time'>
                    <View>{publisher}</View>
                    <View className='line'></View>
                    <View>{startTime}</View>
                </View>
            </View>
        </View>
    );
}


function CardB(props) {

    const {
        title,
        content,
        time,
        isRead,
        publisher,
        noticeType,
        toLink,
        userType
    } = props

    return (
        <View className='card_container_B' onClick={toLink}>
            <View className='todo_icon' style={{ backgroundColor: `${isRead ? '#ccc' : '#f64545'}` }}></View>
            <View className='todo_body'>
                <View className='title'>
                    <Text className='urgent_txt' style={noticeType == 1 ? '' : { display: 'none' }}>[紧急]</Text>
                    <Text className={isRead ? 'already_read title' : 'title'}>{title}</Text>
                </View>
                <View className='content'>
                    <RichText nodes={content} />
                </View>
                <View className='footer'>
                    <Text className='publisher'>{publisher}</Text>
                    <View className='line'></View>
                    <Text className='time'>{time}</Text>
                    <View className='line'></View>
                    <Text
                        className={isRead ? 'already_read' : 'no_read'}
                    >{isRead ? '已读' : '未读'}</Text>
                </View>
            </View>
        </View>
    );
}

function CardC(props) {

    let {
        content,
        time,
        sourceName,
        toLink,
        id,
        status,
        pressId,
        userType
    } = props

    // console.log(props);
    if (content) {
        content = content.replace('<p>', '').replace('</p>', '')
    }


    return (
        <View
            className='card_container_C'
            onClick={toLink}
        >
            <View className='main_body'>
                <View className="title" style={{ color: `${status == 1 ? '#6666' : ''}` }}>{content}</View>
                <View className='footer'>
                    <Text className='content'>{sourceName}</Text>
                    <View className='line'></View>
                    <Text className='time'>{time}</Text>
                </View>
            </View>
        </View>
    );
}

function CardD(props) {
    const {
        senderName,
        senderPhoto,
        msgContent,
        onClick,
        msgType,
        groupName,
        unreadMsgCount,
        isShield,
        id,
        time,
        shieldHandle,
        delHandle,
        noDisturbHandle,
        pressId,
        isLongPress,
        onTouchStart,
        onTouchEnd,
        isNodisturb,
        groupSender,
        detail,
        userType
    } = props

    // 移除会话
    const toDelete = (item) => {
        Taro.showModal({
            title: '提示',
            content: '是否移除该会话？',
            success: function (res) {
                if (res.confirm) {
                    delHandle(item)
                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }
        })
    }


    return (
        <View
            className={`${id === pressId && isLongPress ? 'pressed' : ''} card_container_D`}
            onTouchStart={onTouchStart}
            onTouchEnd={onTouchEnd}
            onClick={onClick}
        >
            <View className='cardbody'>
                <View className='avatar' style={senderPhoto ? { backgroundImage: `url(${senderPhoto})` } : ''}></View>
                <View className='name'>{msgType == 1 ? senderName : groupName}</View>
                <View className=''>
                    {
                        msgContent ? (msgType === 2 ? <View className='content'>{'[图片]'}</View> :
                            msgType === 5 ? <View className='content'>{'[文件]'}</View> :
                                msgType === 1 ?
                                    <View className='content'>{msgContent}</View> :
                                    <View className='content'>{'[文件]'}</View>) : <View className='content'></View>
                    }
                </View>
                <View className='right_sign'>
                    {
                        isShield ?
                            <View className='shield'></View> : ''
                    }
                    {
                        isNodisturb && !isShield ?
                            <View className='nodisturb'></View> : ''
                    }
                    {
                        isNodisturb && unreadMsgCount > 0 && !isShield ?
                            <View className='news_point'></View> : ''
                    }
                    {
                        unreadMsgCount > 0 && !isShield && !isNodisturb ?
                            <View className='mes_count'>{unreadMsgCount}</View> : ''
                    }
                </View>
                <View className='time'>{time}</View>
            </View>
            {/* <View
                className={id === pressId && isLongPress ? 'bubble' : 'bubble none'}
            >
                <Text className='text del font_header' onClick={() => { toDelete() }} >删除</Text>
                {
                    msgType == 1 ?
                        <Text className='text shield font_header' onClick={shieldHandle} >{isShield ? '取消屏蔽' : '屏蔽此人'}</Text> : ''
                }
                {
                    !isShield ?
                        <Text className='text nodisturb font_header' onClick={noDisturbHandle} >{isNodisturb ? '消息提醒' : '消息免打扰'}</Text> : ''
                }
            </View> */}
        </View>
    )
}

function CardE(props) {
    // console.log(props,'propsprops');

    const {
        title,
        content,
        isRead,
        publisher,
        noticeType,
        toLink,
        newsCoverPath,
        releaseTime,
        status,
        newsTypeName,
        userType,
        isAdvancedAdmin,
    } = props
    // let newContent = '';
    // if(content.indexOf('<img')>-1 || content.indexOf('<video')>-1 ){
    //     // newContent = content.replaceAll('<img ' , '<img style="max-width:15%;height:auto;display:inline-block;margin:10px 0;"') 
    //     // let first = content.indexOf('<img');
    //     // let last = content.lastIndexOf('style=""/>');
    //     // if (first > -1) {
    //     //   let oldTxt = content.slice(first, last + 10);
    //     //   let newTxt = content.replace(oldTxt, '');
    //     //   newContent = newTxt
    //     //   that.editor1.$txt.html(newTxt);
    //     // }
    // }else{
    //     // console.log(content,'content');
    //     newContent = content
    // }

    return (
        <View className='card_container_E' onClick={toLink}>
            <View className='img_container'>
                <View className='todo_img' style={{ backgroundImage: `url(${newsCoverPath !== '' ? newsCoverPath : newsCoverPng}) `, backgroundSize: '100% 100%' }}></View>
            </View>
            <View className='todo_body'>
                <View className='title'>
                    {
                        userType == 0 || isAdvancedAdmin == 1 ?
                            <Text
                                className={status == 1 ? 'already_release' : 'no_release'}
                            >{status == 1 ? '已发布' : '未发布'}</Text>
                            : ''
                    }
                    <Text className={isRead ? 'already_read title' : 'title'}>{title}</Text>
                </View>
                <View className='content'>
                    <RichText nodes={content} />
                </View>
                <View className='footer'>
                    <Text className='publisher'>{newsTypeName}</Text>
                    {
                        releaseTime ?
                            <View className='line'></View> : ''
                    }
                    <Text className='time'>{releaseTime}</Text>
                    {/* <View className='line'></View> */}
                    {/* <Text
                        className={status ? 'already_read' : 'no_read'}
                    >{status ? '已发布' : '未发布'}</Text> */}
                </View>
            </View>
        </View>
    );
}

function CardF(props) {
    // console.log(props, 'propsprops');

    const {
        title,
        content,
        isRead,
        publisher,
        noticeType,
        toLink,
        newsCoverPath,
        releaseTime,
        status,
        newsTypeName,
        userType,
        isAdvancedAdmin,
        isManage,
        userName,
        index,
        readCount,
    } = props
    return (
        <View className='card_container_F' onClick={toLink}>
            <View className='img_container'>
                <View className='todo_img' style={{ backgroundImage: `url(${newsCoverPath !== '' ? newsCoverPath : newsCoverPng}) `, backgroundSize: '100% 100%' }}></View>
            </View>
            <View className='todo_body'>
                <View className='title'>
                    {
                        (userType == 0 || isAdvancedAdmin == 1) && isManage == 1 ?
                            <Text
                                className={status == 1 ? 'already_release' : 'no_release'}
                            >{status == 1 ? '已发布' : '未发布'}</Text>
                            : ''
                    }
                    <Text className={isRead ? 'already_read title' : 'title'}>{title}</Text>
                    <Text className={`title ${index % 2 === 0 ? 'title_blue' : 'title_green'}`}>{newsTypeName}</Text>
                </View>
                <View className='content'>
                    {/* <RichText nodes={content} /> */}
                </View>
                <View className='footer'>
                        <Text className='publisher'>{userName}</Text>
                        {
                            releaseTime ?
                                <View className='line'></View> : ''
                        }
                        <Text className='time'>{releaseTime}</Text>
                        {
                            status == 1?
                            <View className='read_num'><View className='read_icon'></View>{readCount}</View>
                            :''
                        }
                </View>
            </View>
        </View>
    );
}

export default function App(props) {
    let {
        type
    } = props

    if (type === 'A') {
        return <CardA {...props} />
    } else if (type === 'B') {
        return <CardB {...props} />
    } else if (type === 'C') {
        return <CardC {...props} />
    } else if (type === 'D') {
        return <CardD {...props} />
    } else if (type === 'E') {
        return <CardE {...props} />
    } else if (type === 'F') {
        return <CardF {...props} />
    } else {
        return <CardA {...props} />
    }
} 
